@import "../../both/mixin";
@import "./UserHeaderCommon";

@include cf("div.header_container");
// 反色的头
div.header_container.bln.reverse{
  width : 100%;
  padding: $header_padding_top_bottom $header_padding_left_right;
  background-color : #14191e;

  div.fl{
    float : left;

    .logo{
      height : $header_height - 20px;
      width : 140px;
      display: block;
      float: left;
      background-size: 140px;
      background-position: 0 $logo_margin_top;
      background-image: url("../../../../img/eda_logo.png");
      background-repeat: no-repeat;
      overflow: hidden;
    }

    @include cf("ul.banner");
    ul.banner{
      display: block;
      list-style : none;
      float: left;

      li {
        display: block;
        float : left;
        width : $list_width;
        padding : $list_padding_top_bottom $list_padding_left_right;
        font-size : $list_font_size;
        text-align: center;
        height : $list_height;
      }
      li:hover{
        background-color: #363c41;
        cursor: pointer;
      }

      li:first-child{
        margin-left : 16px;
      }

      a{
        text-decoration: none;
        color : #fff;
      }
    }
  }

  div.fl.video{
    a{
      text-decoration: none;
      color : #969b9e;
      width : 70px;
      text-align: center;
      margin-left : -20px;
      height : $header_height - 20px;
      line-height: $header_height - 20px;
      display: block;
      float: left;
    }

    a:hover{
      text-decoration: none;
      background-color: #363c40;
      color: #fff;
    }

    .title{
      float: left;
      line-height: $header_height - 20px;
      height : $header_height - 20px;
      font-size: 14px;
      color: #b5b9bc;
    }

    .description{
      float: left;
      line-height: $header_height - 20px;
      height : $header_height - 20px;
      font-size: 12px;
      color: #787d82;
      margin-left : 15px;
      word-break: keep-all;
      max-width : 300px;
      overflow: hidden;
    }
  }

  div.fr{
    float: right;

    @include cf("ul.banner_r");
    ul.banner_r{
      display: block;
      list-style : none;

      li{
        display: block;
        float: left;
      }

      li:hover {
        background-color : #363c41;
        cursor: pointer;
      }

      li:first-child{
        padding-top : 20px;
        padding-bottom: 10px;
        margin-right : 15px;
      }

      li:first-child:hover{
        background-color : #14191e;
      }

      div.banner_search{
        position: relative;

        div.badge_cr{
          position : absolute;
          left: 2px;
          top : 0;
        }

        span.search_badge{
          position: relative;
          background-color: #2b333b;
          padding : 4px;
          margin-left : 2px;
          font-size : 16px;
          color : #787d82;
          cursor: pointer;
        }
      }

      input[type="text"].banner_search_input{
        position: relative;
        border : 0;
        border-bottom: 1px solid #787d82;
        height : 30px;
        width : 255px;
        font-size : 18px;
        color : #787d82;
        outline : none;
        background-color : #14191e;
      }

      input[type="text"]:focus{
        border: 0;
        border-bottom: 1px solid darkgray;
        outline : none;
      }

      i.icon_search{
        color : #787d82;
        font-size : 18px;
        position : absolute;
        right : 0;
        cursor: pointer;
      }

      .app_download{
        font-size : 24px;
        color : #787d82;
      }

      .mooc-avatar{
        width : 35px;
        height : 35px;
        border-radius: 50%;
        vertical-align: middle;
        margin-left : 10px;
      }

      .mooc-welcome{
        display: inline-block;
        height : 30px;
        line-height:30px;
        color : #787D82;
      }

      a{
        text-decoration: none;
        color : #787d82;
        display: block;
        padding : $list_padding_top_bottom $list_padding_left_right;
        text-align: center;
        font-size : $list_font_size;
        height : $list_height;
        line-height : 23px;
      }

      a.personal_center{
        padding : 15px 0px;
      }

      li:hover > a{
        color : red;
      }
    }
  }
}

.popup_cr.bln {
  $login_pop_up_width: 450px;
  $login_panel_background_color : #FFFFFF;
  $login_panel_header_height : 50px;

  .popup_panel{
    position: fixed ;
    top : 20% ;
    width: $login_pop_up_width;
    transform: translate(-($login_pop_up_width / 2),0);
  }

  .login_header{
    height : $login_panel_header_height;
    line-height : $login_panel_header_height;
    background-color: $login_panel_background_color;
    border-bottom: 1px solid #D9D9D9;

    .left {
      float : left;
      height : $login_panel_header_height;
    }

    .logo{
      background-image: url("../../../../img/eda_logo.png");
      background-size : auto 100%;
      height : 36px;
      width : 36px;
      background-position: 0 0;
      display: inline-block;
      margin-left : 20px;
      vertical-align: middle;
    }

    span{
      vertical-align: middle;
      display: inline-block;
    }

    .logo_name{
      font-size : 20px;
      font-weight: 700;
      margin-left : 10px;
      color : #2F2F2F;
    }

    .login_hint{
      margin-left : 10px;
      color : #575757;
      font-size : 16px;
      height : 16px;
      border-left : 1px solid #BBBBBB;
      line-height : 16px;
    }

    .right {
      float : right;
      height : $login_panel_header_height;
      line-height : $login_panel_header_height;

      div{
        display: inline-block;
      }

      .register_hint{
        color : #575757;
        font-size : 14px;
      }

      .register_btn{
        color : white;
        background-color : #F73736;
        font-size : 14px;
        font-weight : 500;
        height : 32px;
        line-height : 30px;
        padding : 0px 15px;
        margin-left : 10px;
        border-radius: 2px;
        cursor: pointer;
      }

      i.fa.fa-close{
        margin-left : 15px;
        margin-right : 10px;
        font-size : 18px;
        cursor: pointer;
      }

    }

  }

  $body_width : 300px;
  $body_height: 260px;
  $input_width : 350px;
  .panel_body{
    background-color : $login_panel_background_color;

    form.login_form{
      margin : 0 auto;
      height : $body_height;
      padding : 50px 0;

      .input_wr{
        position: relative;
        width : $input_width;
        height : 46px;
        margin: 0 auto 15px auto;

        i{
          z-index : 101;
          position: absolute;
          left : 15px;
          top : 14px;
          color : #B8B8B8;
          font-size : 18px;
        }

        input[type="text"],input[type="text"]:focus,
        input[type="password"],input[type="password"]:focus{
          z-index : 101;
          border : 0;
          outline: none;
          left : 46px;
          top : 3px;
          position: relative;
          height : 40px;
          line-height : 40px;
          font-size : 15px;
          width : $input_width - 50px;
          ::-moz-placeholder { color: #DDD6D4; }
          ::-webkit-input-placeholder { color:#DDD6D4; }
          :-ms-input-placeholder { color:#DDD6D4; }
        }

        .input_border{
          z-index : 100;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border : 1px solid #c2c2c2;
          border-radius : 2px;
          background-color : #FFFFFF;
          transition: all 0.2s;
        }

        input[type="text"]:focus + .input_border,
        input[type="password"]:focus + .input_border{
          box-shadow: 2px 2px 2px #c2c2c2;
          border: 2px solid #c2c2c2;
        }

      }

    }

    @include cf("div.login_btn");
    div.login_btn{
      background-color : #E9241C;
      color : white;
      font-size : 16px;
      margin : 25px auto 0;
      height : 40px;
      line-height : 40px;
      cursor: pointer;
      border-radius: 2px;
      width : $input_width;
      text-align: center;
    }
  }
}